<template>
    <div class="company-bind">
        <el-card>
            <div class="text-xl my-4">第三方账号授权</div>
            <div class="item-box flex">
                <div class="item mr-4">
                    <div @click="onJumpBind" class="cursor-pointer">
                        <img src="@/assets/images/weixin.png" alt="">
                    </div>
                    <div class="mt-2" v-if="my.wx_work_corpid">已绑定</div>
                    <div class="mt-2" v-else>将角色地图添加到您的企业微信工作台</div>
                </div>
                <div class="item">
                    <div @click="showCode" class="cursor-pointer">
                        <img src="@/assets/images/dingding.png" alt="">
                    </div>
                    <div class="mt-2" >将角色地图添加到您的钉钉工作台</div>
                </div>
            </div>
        </el-card>

        <div :class="`code-mask ${show && 'show'}`" @click.stop="showCode">
            <div class="code-content">
                <div class="code-title">
                    用钉钉管理员扫码，安装角色地图到工作台
                </div>
                <img src="@/assets/images/dingtalk-app.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    computed: {
        my() {
            return this.$store.state.my;
        },
    },
    data() {
        return {
            url: '',
            show: false,
        };
    },
    methods: {
        bindWx(code) {
            this.loading = true;
            API.post('company_check/bind_wx_work', { code }).then(() => {
                $ele.$message.success('绑定成功');
                this.url = '';
                this.updateData();
            }).catch(() => this.loading = false);
        },

        updateData() {
            API.get('my/profile').then(res => {
                this.$store.commit('setMy', res);
                window.location.reload();
            }).finally(() => this.loading = false);
        },

        onJumpBind() {
            if (this.my.wx_work_corpid) {
                $ele.$confirm('此企业帐号已绑定企业微信，是否重新绑定企业微信？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    window.location.href = this.url;
                }).catch();
            } else window.location.href = this.url;
        },

        showCode() {
            this.show = !this.show;
        },
    },
    mounted() {
        const code = this.$route.query.auth_code;

        if (code) this.bindWx(code);
        const { origin, pathname } = window.location;
        this.url = `https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=wwb619d356de68d627&redirect_uri=${origin}${pathname}&state=wxwork&usertype=member`;
    },
};
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 288px;
    height: 202px;
    box-shadow: 0 0 6px 2px #f5f5f5;

    img {
        width: 88px;
        height: 88px;
    }
}

.code-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: .7);

    img {
        width: 280px;
        height: 280px;
        padding: 20px;
        box-sizing: content-box;
        border: 1px solid rgb(221, 221, 221);
    }

    &.show {
        opacity: 1;
        z-index: 11;
        transition: opacity .3s;
    }

    .code-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 600px;
        height: 600px;
        background: white;
    }

    .code-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 30px;
    }
}
</style>
